<template>
  <div class="break-through-scatter" id="break-through-scatter">
    
  </div>
</template>

<script>
  import {Scatter} from "@antv/g2plot";
  export default {
    name: "BreakThroughScatter",
    props:{
      breakThrough:{
        type:Array,
        default(){
          return []
        }
      },
      playerName:{
        type:String,
        default(){
          return ''
        }
      },
    },
    mounted() {
      let data = this.breakThrough;
      data.map(item=>{
        // item.longPassAccuracy = parseInt(item.longPassAccuracy * 100)
      });
      let current_player_name = this.playerName;
      const scatterPlot = new Scatter('break-through-scatter', {
        data,
        xField: 'longPassTotal',
        yField: 'longPassAccuracy',
        meta:{
          longPassTotal: {
            alias:'过人总数',
            formatter:(v)=>{
              return v + '次'
            }
          },
          longPassAccuracy: {
            alias:'过人成功率',
            formatter:(v)=>{
              return v + '%'
            }
          },
          playerName:{
            alias:'球员姓名',
          }
        },
        xAxis: {
          min:0,
          max:600,
          tickInterval:50,
          grid: null,
          label:{
            formatter:(v)=>{
              if(v === '600次'){
                return v
              }
              return parseInt(v)
            }
          }
        },
        yAxis: {
          minLimit:0,
          maxLimit:100,
          tickInterval:10,
          grid: null,
          tickLine:{
            style:{
              stroke: '#D3D3D3',
              lineWidth: 2,
            },
            length:4,
          },
          line:{
            style: {
              stroke: '#D3D3D3',
              lineWidth: 2,
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            }
          },
          label:{
            formatter:(v)=>{
              if(v === '100%'){
                return v
              }
              return parseInt(v)
            }
          }
        },
        // size: 1,

        sizeField:'playerName',
        size: ({playerName}) => {
          if(playerName === current_player_name ){
            return 3;
          }
          return  1;
        },


        colorField: 'playerName', // 部分图表使用 seriesField
        color: ({ playerName }) => {
          if(playerName === current_player_name ){
            return 'red';
          }
          return '#D3D3D3';
        },
        legend: false,
        //下面的x,y参数必须加个中括号，不然会报类型错误？
        pointStyle: ({playerName})=>{
          if(playerName === current_player_name){
            return {
              fill: 'red',
              stroke: 'red',
            }
          }
          return {
            fill: '#D3D3D3',
            stroke: '#D3D3D3',
          }
        },
        tooltip:{
          fields:['playerName','longPassTotal','longPassAccuracy',],
          domStyles:{
            'g2-tooltip':{
              width:'220px',
              height:'80px'
            },
            'g2-tooltip-list-item':{
              // backgroundColor:'blue',
              display: 'flex',
              // justifyContent:'Center'
            },
            'g2-tooltip-name':{
              width:'100px',
              textAlign:'left',
              // backgroundColor:'red',
            },
            'g2-tooltip-value':{
              width:'80px',
              textAlign:'left',
              // backgroundColor:'red',
            },
            'g2-tooltip-marker':{
              width:'15px',
              marginTop:'3px'
            }
          },
          position:'left',
          offset:30
        },
      });
      scatterPlot.render();
    }
  }
</script>

<style scoped>
  .break-through-scatter {
    margin-top: -1px;
    width: 230px;
    height: 180px;
  }
</style>